<template>
	<div class="hot">
		<div class="hot-title">热门标签</div>
		<div class="hot-selected">
			<blog-hot-selected v-model="isSelected" @click="handlerOpenNationList"></blog-hot-selected>
			<div class="hot-selected-nation-list">
				<nation-list v-model="isShow" @update:selected="handlerUpdateSelected"></nation-list>
			</div>
		</div>
		<div class="hot-tags" @click="handlerClick($event)" ref="tags">
			<div class="hot-tags-item" v-for="value in 20"><span>全部标签全部标签全部标签</span></div>
		</div>
	</div>
</template>

<script setup>
	const tagsIns = useTemplateRef('tags');
	const isShow = ref(false);
	const isSelected = ref(false);
	function handlerOpenNationList() {
		isShow.value = !isShow.value;
	}
	function handlerUpdateSelected() {
		isSelected.value = true;
	}
	function handlerClick(e) {
		const tagsItem = findParentElement(e.target, 'hot-tags-item');
		if (!tagsItem) return;
		console.log(tagsItem);
		tagsIns.value.querySelector('.is-active')?.classList.remove('is-active');
		tagsItem.classList.add('is-active');
	}
	function findParentElement(element, className) {
		while (element && element !== document.body) {
			if (element.classList.contains(className)) {
				return element;
			}
			element = element.parentElement;
		}
		return null;
	}
</script>

<style lang="scss" scoped>
	.hot {
		// width: 360px;
		@include scaleWidth(360px,330px);
		height: 260px;
		background-color: var(--blog-classify-bg-color);
		padding: 20px 17px 18px;
		.hot-title {
			@include font(_, 18px, 30px, 700, var(--blog-tag-text-color));
			margin-bottom: 10px;
		}
		.hot-selected {
			margin-bottom: 10px;
			position: relative;
			.hot-selected-nation-list {
				position: absolute;
				transform: translate(-59%, 2%);
			}
		}
		.hot-tags {
			display: grid;
			grid-template-columns: repeat(3, 100px);
			gap: 5px;
			height: 150px;
			overflow-y: scroll;
			overflow-x: hidden;

			.hot-tags-item {
				cursor: pointer;
				height: 28px;
				// width: 100px;
				@include scaleWidth(100px,90px);
				@include font(_, 12px, 20px, 400, var(--blog-tag-text-color));
				background-color: var(--blog-box-bg-color-gray);
				@include flex;
				padding: 5px 10px;
				border-radius: var(--blog-box-radius);
				&.is-active {
					color: white;
					background-color: var(--blog-box-bg-color-blue);
				}
				span {
					@include text-overflow();
				}
			}
		}
	}
</style>
